<template>
    <div style="padding:10px;background-color: white;">
        <Search @submit="handleSearch" @reset="handleReset">
            <AFormItem label="套餐名称">
                <AInput allowClear v-model:value="state.formData.title" />
            </AFormItem>
            <AFormItem label="套餐ID">
                <AInput allowClear v-model:value="state.formData.packageId" />
            </AFormItem>
            <AFormItem label="套餐状态">
                <a-select allowClear v-model:value="state.formData.status" :options="PackageGroupStatusOptions"> </a-select>
            </AFormItem>
        </Search>
    </div>
    <div style="padding:10px;margin-top:10px;background-color: white;">
        <div class="mb-10">
            <AButton v-if="!props.isInModal" type="primary" @click="addPackage">新增</AButton>
        </div>
        <ATable :data-source="state.dataSource" :columns="columnsRef" bordered :pagination="false">
            <template #bodyCell="{ record, column }">
                <template v-if="column.dataIndex == 'actions' && props.isInModal">
                    <a-button type="text" @click="detailPackage(record)">详情</a-button>
                </template>
                <template v-if="column.dataIndex == 'actions' && !props.isInModal">

                    <a-button v-if="[
                        PackageGroupStatusEnum.TOBEREVIEWED,
                        PackageGroupStatusEnum.REJECT,
                        PackageGroupStatusEnum.REVIEWED,
                        PackageGroupStatusEnum.OFFSALE
                    ].includes(record.status)" type="text" @click="editPackage(record)">编辑</a-button>
                    <a-button v-else type="text" @click="detailPackage(record)">详情</a-button>
                    <!-- 待审核->审核 -->
                    <a-dropdown v-if="record.status === PackageGroupStatusEnum.TOBEREVIEWED">
                        <template #overlay>
                            <a-menu>
                                <a-menu-item key="1">
                                    <div @click="updatePackageStatus(record.id, PackageGroupStatusEnum.REVIEWED)">同意</div>
                                </a-menu-item>
                                <a-menu-item key="2">
                                    <div @click="updatePackageStatus(record.id, PackageGroupStatusEnum.REJECT)">驳回</div>
                                </a-menu-item>
                            </a-menu>
                        </template>
                        <a-button>
                            审核
                            <DownOutlined />
                        </a-button>
                    </a-dropdown>
                    <!-- 已审核|下架->上架 -->
                    <a-button
                        v-if="[PackageGroupStatusEnum.REVIEWED, PackageGroupStatusEnum.OFFSALE].includes(record.status)"
                        type="text" @click="updatePackageStatus(record.id, PackageGroupStatusEnum.ONSALE)">上架</a-button>
                    <!-- 上架->下架 -->
                    <a-button v-if="record.status === PackageGroupStatusEnum.ONSALE" type="text"
                        @click="updatePackageStatus(record.id, PackageGroupStatusEnum.OFFSALE)">下架</a-button>
                    <!-- 下架->作废 -->
                    <a-button v-if="record.status === PackageGroupStatusEnum.OFFSALE" type="text"
                        @click="updatePackageStatus(record.id, PackageGroupStatusEnum.VOIDED)">作废</a-button>
                    <a-button
                        v-if="[PackageGroupStatusEnum.TOBEREVIEWED, PackageGroupStatusEnum.REJECT].includes(record.status)"
                        type="text" @click="updatePackageStatus(record.id, PackageGroupStatusEnum.VOIDED)">删除</a-button>
                </template>
            </template>
        </ATable>
        <Pagination :pagination="state.pagination" @change="pageChange"></Pagination>
    </div>
    <PackageGroupModal :is-detail="state.isDetail" :current="state.current" v-if="state.packageGroupModalVisible"
        @cancel="cancelPackageModal" :isInModal="props.isInModal" @ok="PackageModalOk"></PackageGroupModal>
</template>
<script lang="ts" setup>
import { reactive, h, ref, onBeforeMount,computed } from "vue";
import Search from '@/components/Search/Search.vue';
import Pagination from "@/components/Pagination/index.vue";
import PackageGroupModal from "./components/PackageGroupModal.vue";
import { ResponseVo, PackageTypes, GoodsTypes, CommontTypes, PageResult, PackageGroupStatusOptions, PackageGroupStatusEnum, GoodsCategoryTypes } from "@/type";
import { GoodsCategoryService, PackageService } from "@/service";
import { Button, Image, message } from "ant-design-vue";

const state = reactive<{
    formData: {
        title?: string,
        packageId?: string,
        status?: PackageGroupStatusEnum
    },
    dataSource: any[],
    pagination: CommontTypes.IPagination,
    packageGroupModalVisible: boolean,
    current: Partial<PackageTypes.IPackageItem>;
    isDetail: boolean
}>({
    formData: {},
    pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
    },
    dataSource: [],
    packageGroupModalVisible: false,
    current: {},
    isDetail: false,
})

const columnsRef = computed(() => {
    let list = [
        { title: "套餐ID", dataIndex: "id" },
        { title: "套餐名称", dataIndex: "title" },
        { title: "原始价格(元)", dataIndex: "originalPrice",show:!props.isInModal},
        //@ts-ignore
        {
            title: "套餐主图", dataIndex: "mainImage", customRender({ record }: { record: Partial<PackageTypes.IPackageItem> }) {
                return h(Image, { src: record.mainImage, width: 28, height: 28 })
            }
        },

        { title: "售卖价格(元)", dataIndex: "salePrice" },
        {
            title: "状态", dataIndex: "status", customRender({ record }: { record: Partial<PackageTypes.IPackageItem> }) {
                return h('div', {}, PackageGroupStatusOptions.find(option => option.value == record.status)?.label)
            }
        },
        {
            title: "创建人", customRender({ record }: { record: Partial<PackageTypes.IPackageItem> }) {
                return h('div', {}, `${record.creator}/${record.createTime}`)
            }
        },
        {
            title: "修改人", customRender: ({ record }: { record: Partial<PackageTypes.IPackageItem> }) => {
                return h('div', {}, `${record.updator}/${record.updateTime}`)
            }
        },
        { title: "操作", dataIndex: "actions" }
    ]

    return list.filter(record=>record.show===undefined || record.show===true);
})

const props = defineProps<{
    isInModal: boolean;
}>();

onBeforeMount(() => {
    handleSearch();
})

const handleSearch = async () => {
    const res: ResponseVo<PageResult<PackageTypes.IPackageItem>> = await PackageService.pagePackage({ ...state.formData, ...state.pagination });
    if (res.code === 0) {
        state.dataSource = res.data.list;
        state.pagination.total = res.data.total;
    }
}


const pageChange = (page: number, size: number) => {
    state.pagination.pageNum = page;
    state.pagination.pageSize = size;
    handleSearch();
}

const handleReset = () => {
    state.formData = {};
    state.pagination.pageNum = 1;
    state.pagination.total = 0;
    handleSearch();
}

const addPackage = () => {
    state.isDetail = false;
    state.packageGroupModalVisible = true;
    state.current = {};
}

const editPackage = async (record: Partial<PackageTypes.IPackageItem>) => {
    await detailPackage(record)
    state.isDetail = false;

}

const detailPackage = async (record: Partial<PackageTypes.IPackageItem>) => {
    state.isDetail = true;
    let res: ResponseVo<PackageTypes.IPackageItem> = await PackageService.detailPackage({ packageId: String(record.id) });
    if (res.code === 0) {
        state.current = res.data;
        state.packageGroupModalVisible = true;
    }
}

const cancelPackageModal = () => {
    state.packageGroupModalVisible = false;
}

const PackageModalOk = () => {
    state.packageGroupModalVisible = false;
    state.pagination.pageNum = 1;
    handleSearch();
}

const updatePackageStatus = async (id: number, status: PackageGroupStatusEnum) => {
    let res: ResponseVo<any> = await PackageService.updatePackageStatus(id, status);
    if (res.code === 0) {
        message.success("操作成功")
        state.pagination.pageNum = 1;
        handleSearch();
    }
}
</script>